import React, { Component } from 'react'

export default class User extends Component {

  // 数据源  单一数据源
  state = {
    // 用户数据
    userinfo: {
      username: 'admin',
      isSave: true
    }
  }

  render() {
    let { username, isSave } = this.state.userinfo
    return (
      <div>
        <div>
          {/* 受控组件 */}
          <input type="text" value={username} onKeyUp={this.addUser.bind(this)} onChange={this.setInput.bind(this)} />
        </div>

        <div>
          {/* checked 是否选中的勾选的属性 html */}
          <input type="checkbox" checked={isSave} onChange={this.fnSave.bind(this)} />是否保存数据
        </div>

        <div>
          <button type="button" onClick={this.addUser.bind(this)}>添加用户</button>
        </div>

      </div>
    )
  }

  // 把input中的数据同步到state数据源中
  setInput(evt) {
    // 获取表单项中的数据
    let username = evt.target.value
    // 同步到state数据源中
    this.setState(state => state.userinfo.username = username)
  }
  // 是否勾选
  fnSave(evt) {
    this.setState(state => state.userinfo.isSave = !state.userinfo.isSave)
  }

  addUser(evt) {
    if (evt.keyCode === 13) {
      console.log('提交了数据', this.state.userinfo);
      this.setState(state => state.userinfo.username = '')
    }
    // console.log(this.state.userinfo);
  }


}
